<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#my:after {
				content: "\e618";
				background: transparent !important;
			}
			.ui-icon-coffee:after {
				background: transparent url("http://demos.jquerymobile.com/1.4.5/_assets/img/glyphish-icons/100-coffee.png") 50% 50% no-repeat !important;
				background-size: 20px 24px;
			}
			#skull:after {
				background: url("http://demos.jquerymobile.com/1.4.5/_assets/img/glyphish-icons/21-skull.png") 50% 50% no-repeat;
				background-size: 22px 24px;
			}
			#chat:after {
				background: url("http://demos.jquerymobile.com/1.4.5/_assets/img/glyphish-icons/09-chat2.png") 50% 50% no-repeat;
				background-size: 24px 22px;
			}
			#email:after {
				background: url("http://demos.jquerymobile.com/1.4.5/_assets/img/glyphish-icons/18-envelope.png") 50% 50% no-repeat;
				background-size: 24px 16px;
			}
		</style>
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
	</head>

	<body>
		<div data-role="header" class="nav-glyphish-example" data-theme="a">
			<div data-role="navbar" class="nav-glyphish-example">
				<ul>
					<li><a href="#" id="chat" data-icon="custom">Chat</a></li>
					<li><a href="#" id="email" data-icon="custom">Email</a></li>
					<li><a href="#" id="skull" data-icon="custom">Danger</a></li>
					<li><a href="#" id="my" data-icon="custom">我的</a></li>
				</ul>
			</div>
		</div>
		<ul data-role="listview" data-inset="true">
			<li>
				<a href="#">
					<img src="../_assets/img/album-bb.jpg">
					<h2>Broken Bells</h2>
					<p>Broken Bells</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../_assets/img/album-hc.jpg">
					<h2>Warning</h2>
					<p>Hot Chip</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../_assets/img/album-p.jpg">
					<h2>Wolfgang Amadeus Phoenix</h2>
					<p>Phoenix</p>
				</a>
			</li>
		</ul>
	</body>

</html>